<script lang="ts" setup>
import {h, reactive, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {LockOutlined, UserOutlined} from '@ant-design/icons-vue'
import {useAuthStore} from '@/stores/modules/auth'
import {handleError, success} from '@/utils/message'
import {USER} from '@/constants/messages'
import {FormRules} from '@/utils/validate'
import type {UserLoginDTO} from '@/types/dto/auth'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const loading = ref(false)
const rememberMe = ref(false)

const formState = reactive<UserLoginDTO>({
  userAccount: '',
  userPassword: ''
})

const rules = {
  userAccount: FormRules.userAccount,
  userPassword: FormRules.password
}

const handleLogin = async () => {
  loading.value = true
  try {
    await authStore.login(formState)
    success(USER.LOGIN_SUCCESS)

    // 跳转到重定向页面或首页
    const redirect = route.query.redirect as string
    await router.push(redirect || '/')
  } catch (error: any) {
    handleError(error, USER.LOGIN_FAILED)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-header">
        <h1 class="logo">栖云图库</h1>
        <p class="subtitle">优雅的图片管理平台</p>
      </div>

      <a-form
          :model="formState"
          :rules="rules"
          class="login-form"
          layout="vertical"
          @finish="handleLogin"
      >
        <a-form-item label="账号" name="userAccount">
          <a-input
              v-model:value="formState.userAccount"
              :prefix="h(UserOutlined)"
              placeholder="请输入账号"
              size="large"
          />
        </a-form-item>

        <a-form-item label="密码" name="userPassword">
          <a-input-password
              v-model:value="formState.userPassword"
              :prefix="h(LockOutlined)"
              placeholder="请输入密码"
              size="large"
          />
        </a-form-item>

        <a-form-item>
          <a-flex align="center" justify="space-between">
            <a-checkbox v-model:checked="rememberMe">记住我</a-checkbox>
            <router-link class="forgot-link" to="/forgot-password">忘记密码？</router-link>
          </a-flex>
        </a-form-item>

        <a-form-item>
          <a-button
              :loading="loading"
              block
              html-type="submit"
              size="large"
              type="primary"
          >
            登录
          </a-button>
        </a-form-item>

        <a-divider plain>还没有账号？</a-divider>

        <a-button block size="large" @click="$router.push('/register')">
          立即注册
        </a-button>
      </a-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/styles/variables.scss' as *;

.login-container {
  min-height: 100vh;
  @include flex-center;
  background: $gradient-primary;
  padding: $spacing-xl;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s ease-in-out infinite;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 25s ease-in-out infinite reverse;
  }

  @keyframes float {
    0%, 100% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(30px, 30px);
    }
  }
}

.login-box {
  width: 100%;
  max-width: 440px;
  background: white;
  border-radius: $radius-2xl;
  padding: $spacing-3xl $spacing-2xl;
  box-shadow: $shadow-2xl;
  position: relative;
  z-index: 1;

  @include responsive($breakpoint-sm) {
    padding: $spacing-2xl $spacing-xl;
  }
}

.login-header {
  text-align: center;
  margin-bottom: $spacing-2xl;

  .logo {
    font-size: $font-4xl;
    font-weight: $font-extrabold;
    background: $gradient-primary;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: $spacing-sm;
    letter-spacing: -0.5px;
  }

  .subtitle {
    color: $text-tertiary;
    font-size: $font-base;
    font-weight: $font-medium;
  }
}

.login-form {
  :deep(.ant-form-item) {
    margin-bottom: $spacing-lg;
  }

  :deep(.ant-form-item-label > label) {
    font-weight: $font-semibold;
    color: $text-primary;
  }

  :deep(.ant-input),
  :deep(.ant-input-password) {
    border-radius: $radius-lg;
    padding: $spacing-md;
    font-size: $font-base;

    &:hover {
      border-color: $primary-light;
    }

    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
    }
  }

  :deep(.ant-btn-lg) {
    height: 48px;
    border-radius: $radius-lg;
    font-size: $font-base;
    font-weight: $font-semibold;
  }

  :deep(.ant-btn-primary) {
    background: $gradient-primary;
    border: none;
    box-shadow: $shadow-sm;

    &:hover {
      box-shadow: $shadow-primary;
      transform: translateY(-2px);
    }
  }

  :deep(.ant-checkbox-wrapper) {
    font-size: $font-sm;
    color: $text-secondary;
  }

  :deep(.ant-divider) {
    margin: $spacing-xl 0;

    .ant-divider-inner-text {
      color: $text-tertiary;
      font-size: $font-sm;
      font-weight: $font-medium;
    }
  }

  .forgot-link {
    color: $primary-color;
    font-size: $font-sm;
    font-weight: $font-medium;
    transition: $transition-color;

    &:hover {
      color: $primary-dark;
    }
  }
}
</style>